<template>

    <div class="slideMenuRoot">


        <div class="logoRoot">
            <img src="/logo.jpg" />
            <h1>
                {{$appTitle}}
            </h1>
        </div>
        <a-menu

                :openKeys.sync="openKeys"
                mode="inline"
                @click="menuClick"
        >

            <template v-for="item in list">

                <a-menu-item v-if="item.permission.permissionType == 'FUNCTION' && item.permission.permissionVisible"
                             :key="JSON.stringify(item.permission)">
                    <a-icon :type="item.permission.permissionIcon"/>
                    <span>{{item.permission.permissionName}}</span>
                </a-menu-item>

                <SubMenu v-if="item.permission.permissionType == 'MENU'" :menuInfo="item"></SubMenu>

            </template>

        </a-menu>

    </div>
</template>

<script>
    /*
     * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
     * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
     * */
    import SubMenu from './SubMenu'
    import {Menu, Icon} from 'ant-design-vue';
    import persistentUtil from '../../common/persistentUtil'


    export default {

        components: {
            SubMenu: SubMenu,
            AMenu: Menu,
            AMenuItem: Menu.Item,
            AIcon: Icon,
            ASubMenu: Menu.SubMenu
        },
        data() {
            return {
                list: [],
                selectedKeys: [],
                openKeys: [],
            }
        },
        mounted() {
            this.getMenus();
        },
        methods: {

            getMenus() {

                let token = persistentUtil.getToken();

                if(token == null || token == undefined){

                    //当前未登录 就不要加载菜单
                    return;
                }

                this.$axios.get("/auth/getMenus")
                    .then(d => {

                        let result = d.data;

                        if (result.status == 0) {
                            this.list = result.data;
                        }
                    })
                    .catch(e => {
                    })

            },
            menuClick(item) {

                let permission = JSON.parse(item.key);

                this.$emit("menuClick", permission);
            }
        },
        watch:{
            '$route.fullpath':{
                handler(ov,nv){
                    console.log(nv);
                }
            }
        }
    }
</script>

<style lang="less" scoped>


    .slideMenuRoot {

    }

    .ant-menu-inline {

        border: none;

        .ant-menu-item {
            width: 100%;
        }
    }

    .ant-menu-vertical {
        border: none;
    }

    .logoRoot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: lighten(@menu-bg, 5%);;
        height: @layout-header-height;
    }

    .logoRoot {

        h1{
            display: contents;
            color: @menu-highlight-color
        }

        img{
            height: 70%;
            margin-right: 15px;
        }
    }

    .ant-layout-sider-collapsed {
        h1 {
            display: none;
        }
        img{
            margin-right: 0px;
        }
    }

</style>